import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Platform } from 'react-native';
import { Carousel, Grid } from '@ant-design/react-native';
import { IconX } from '@/rcomponents/iconx';
import Metrics from '@/Themes/Metrics';
import UserStore from '@/stores/userStore';
import SearchConfig from './SearchConfig';
import { ScrollView } from 'react-native-gesture-handler';

const styles = StyleSheet.create({
  wrapper: {
    height: Metrics.height / 4,
  },
  containerHorizontal: {
    width: '100%',
  },
  gridContainer: {},
});

function SearchHomeScreen({ routes, navigation }) {
  const userStore = UserStore.useStore();
  useEffect(() => {
    userStore.getUser();
  }, []);
  const gridRoute = SearchConfig.filter(
    (homr) =>
      homr.gridOrder &&
      userStore.hasPermission(homr.component && homr.component.permission),
  )
    .sort((horl, horr) => horl.gridOrder - horr.gridOrder)
    .map((hor) => ({
      icon: hor.iconDef ? (
        <IconX origin={hor.iconDef.type} name={hor.iconDef.name} size={32} />
      ) : (
        <Image source={hor.imageSrc} />
      ),
      text: hor.title,
      route: hor.component && hor.component.routeName,
    }));

  return (
    <ScrollView>
      <Grid
        data={gridRoute}
        columnNum={Platform.isPad ? 5 : 4}
        hasLine={false}
        onPress={(el) => {
          if (el.route) {
            navigation.navigate(el.route);
          }
        }}
      />
    </ScrollView>
  );
}

SearchHomeScreen.routeName = 'SearchHomeScreen';
export default SearchHomeScreen;
